<template>
  <div id="app">
    <router-view v-slot="{ Component }">
      <transition :name="transitionName">
        <component :is="Component" />
      </transition>
    </router-view>
    <menus-bar v-show="isMenusBar" />
  </div>
</template>

<script setup>
import menusBar from '@/components/menus-bar/index.vue'
import { useRouter, useRoute } from 'vue-router'
import { ref, reactive, watch } from 'vue'
import router from '@/router/index'
const transitionName = ref('slide-right')
const route = useRoute()
const isMenusBar = ref(false)
watch(
  () => route,
  () => {
    // 筛选不需要过渡动画的路由
    let routes = ['/my']
    if (routes.indexOf(route.path) != -1) {
      transitionName.value = 'fade'
    } else {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      let isBack = router.isBack
      if (isBack) {
        //设置动画名称
        transitionName.value = 'slide-left'
      } else {
        transitionName.value = 'slide-right'
      }
      router.isBack = false
    }

    if (route.path == '/home' || route.path == '/my') {
      isMenusBar.value = true
    } else {
      isMenusBar.value = false
    }
  },
  { deep: true }
)
</script>

<style lang="scss">
// 引入初始化样式
@import '@/style/main.scss';
html,
body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
#app {
  height: 100%;
  overflow: auto;
  font-family: 'PingFang', sans-serif;
  // font-family: 'Avenir', Helvetica, Arial, sans-serif;
  // -webkit-font-smoothing: antialiased;
  // -moz-osx-font-smoothing: grayscale;
  // // text-align: center;
  // color: #2c3e50;
  background-color: #f3f5f8;
}
// 去除滚动条
::-webkit-scrollbar {
  display: none;
}
.element {
  -ms-overflow-style: none;
}
.element {
  overflow: -moz-scrollbars-none;
}

/*
这个是避免切换的时候，两个页面都是半屏显示的问题
*/
.router {
  width: 100%;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}

.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
